<template>
  <div class="home card">
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="主诊团队">
          <el-select v-model="zztdvalue" placeholder="Select" size="large" style="width: 240px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="患者">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addbutton">新入患者</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="contentbox">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="近100天随访" name="1">
          <div class="table-box">
            <el-table :data="datalist" border style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="date" label="Date" width="180" show-overflow-tooltip />
              <el-table-column prop="name" label="Name" width="180" />
              <el-table-column label="address">
                <template #default="scope">{{ scope.row.address }}</template>
              </el-table-column>
            </el-table>
            <div class="fybox">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 50, 100, 200]"
                layout="total, sizes, prev, pager"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="近30天漏诊" name="2">
          <div class="table-box">
            <el-table :data="datalist" style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="date" label="Date" width="180" />
              <el-table-column prop="name" label="Name" width="180" />
              <el-table-column prop="address" label="Address" />
            </el-table>
            <div class="fybox">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 50, 100, 200]"
                layout="total, sizes, prev, pager"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup name="home">
import { ref, reactive } from "vue";
import { Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
const activeName = ref("1");
const handleClick = tab => {
  console.log(activeName.value);
};
let datalist = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  }
]);
const zztdvalue = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1"
  },
  {
    value: "Option2",
    label: "Option2"
  },
  {
    value: "Option3",
    label: "Option3"
  },
  {
    value: "Option4",
    label: "Option4"
  },
  {
    value: "Option5",
    label: "Option5"
  }
];
const formInline = reactive({
  user: "",
  region: "",
  date: ""
});
let currentPage = ref(1);
let pageSize = ref(10);

const onSubmit = () => {
  console.log("submit!");
};
let addbutton = () => {};

let handleSizeChange = () => {
  getList();
};
let handleCurrentChange = () => {
  getList();
};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  .contentbox {
    width: 100%;
    height: 300px;
  }

  .szbox {
    justify-content: end;
    display: flex;
  }
}

.card {
  padding: 25px;
}
</style>
